<template>
  <div class="layout">
    <Layout style="height: 100vh;">
      <Sider hide-trigger class="backgroundColorWhite">
        <Menu :theme="theme3" active-name="1"  width='auto' style="height: 100%;">
          <Card style="width:100%;">
            <div style="text-align:center">
                <h3>Tonakyo</h3>
            </div>
          </Card>
          <MenuGroup :title="item.name" v-for="item in siderData" :key="item.name">
            <MenuItem :name="itemChild.router" 
            v-for="itemChild in item.child" 
            :key="itemChild.name" 
            @click.native="onClickSlider(itemChild.router)"
            >
            <Icon :type="itemChild.icon" />
            {{itemChild.childName}}
            </MenuItem>
          </MenuGroup>
        </Menu>
      </Sider>
      <Layout>
        <Header style="background-color: #fff;">
          <!-- <RadioGroup v-model="theme3">
              <Radio label="light">明亮</Radio>
              <Radio label="dark">暗黑</Radio>
            </RadioGroup> -->
          <HeaderTop></HeaderTop>
        </Header>
        <Content class="main-view"><router-view/></Content>
        <Footer>
            <playbackControlVue :songmid = "musicInfo.songmid"></playbackControlVue>
        </Footer>
      </Layout>
    </Layout>
    <!-- <Button type="primary">Primary</Button> -->
  </div>
</template>

<script>
import musicApi from "@/Apis/musicApis";
import playbackControlVue from "./playbackControl/playbackControl.vue";
import HeaderTop from "./headerTop/headerTop.vue"
import eventBus from '@/utils/bus'
export default {
  components:{
    playbackControlVue,
    HeaderTop
  },
  data() {
    return {
      siderData:[
        {name:'在线音乐',
        child:[
          {childName:"搜索",router:"/serchMusic",icon:"md-thumbs-up"},
          {childName:'音乐馆',router:"/musicHall",icon:"ios-musical-notes"},
          {childName:'视频',router:"/musicVideo",icon:"ios-videocam"},
          {childName:'电台',router:"/radioStation",icon:"md-wifi"},
          ]
        },
        {name:'我的音乐',
        child:[
          {childName:"我的喜欢",router:"/myLoveMusic",icon:"ios-heart"},
          {childName:'试听列表',router:"/auditionList",icon:"md-menu"}
          ]
        },
        {name:"Other"}
      ],
      name: "周杰伦",
      theme3: 'light',
      musicInfo:{
          songmid:'',
      }
    }
  },
  methods: {
    serchSong() {
      musicApi
        .searchMusic({
          key: this.name
        }).then(res => {
          this.musicInfo.songmid = res.data.data.list[0].songmid;
          console.log(this.musicInfo.songmid);
        })
    },
    onClickSlider(v){
      eventBus.$emit('clearSerchValue',false)
      let str = window.location.hash
      str = str.substring(2)
      if(v == str) return
      else this.$router.push(v)
    },
    
  },
  created() {
    // this.serchSong()
  }
}

</script>
<style scoped>
.layout {
  height: 100vh;
}
.main-view{
  height: 756px;
  overflow-y:scroll
}
.main-view::-webkit-scrollbar  
{  
    width: 1px;  /*滚动条宽度*/
    height: 5px;  /*滚动条高度*/
}  
.ivu-layout-footer{
  padding: 0;
}
</style>
